<template>
    <el-container>
        <div style="width: 100%;">
            <div  class="ddi" style="display: flex;">
        <div class="left">
            <div :class="comType == 0 ? 'biaoti1' : 'biaoti2'" @click="addclass(0)">
                <span :class="comType == 0 ? 'bi1' : 'bi2'">1</span>
                <span>基本信息</span>
            </div>
        </div>
        <div class="right">
            <div :class="comType == 1 ? 'biaoti1' : 'biaoti2'"  @click="addclass(1)">
                <span :class="comType == 1 ? 'bi1' : 'bi2'">2</span>
                <span>网报信息</span>
            </div>
        </div></div>
        <div  v-if="comType==0"><add1></add1></div>
        <div v-if="comType==1"><add2></add2></div>
    </div>
    </el-container>
</template>
<script>
import add1 from './add1.vue';
import add2 from './add2.vue';

    export  default {
        data() {
            return {
                comType: 0,
            }
        },
        components:{
            add1,
            add2,
        },
        methods:{
            addclass(a){
                this.comType = a;
            }
        }
    }  
</script>
<style>
    .left{
     width: 50%;
    }
    .biaoti1{
        height: 100%;
        color: #192942;
        border-bottom: 3px solid #ff4a3f;
        padding-bottom: 5px;
        display: flex;
        align-items: center;
        justify-content:center;
        font-size: 15px;
        cursor: pointer;
    }
    .biaoti2{
        height: 100%;
        color: #999;
        border-bottom: 3px solid #999;
        padding-bottom: 5px;
        display: flex;
        align-items: center;
        justify-content:center;
        font-size: 15px;
        cursor: pointer;
    }
    .bi1{
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        display: inline-block;
        border-radius: 50%;
        color: #fff;
        background-color: #ff4a3f;
        margin: 0 15px 0 30px;
    }
    .bi2{
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        display: inline-block;
        border-radius: 50%;
        color: #fff;
        background-color: #999;
        margin: 0 15px 0 30px;

    }
    .right{
        width: 50%;
    }
    .ddi{
        width: 100%;
        height: 5%;
    }

</style>
